
/*
    // 当需要在一个组件实例上手动侦听事件时，才会使用到下面的方法
    $on(eventName, eventHandler) 侦听一个事件
    $once(eventName, eventHandler) 一次性侦听一个事件
    $off(eventName, eventHandler) 停止侦听一个事件

*/

// 方案一
new Vue({

  data() {
    return {
      timer: null // 定时器名称     
    }
  },

  mounted() {
    // 使用定时器
    this.timer = setIterval(() => {
      // 某些定时操作
    }, 1000)
  },


  beforeDestroy() {
    // 在beforeDestroy声明周期内清除定时器
    clearInterval(this.timer);
    this.timer = null;
  }
})

// 方案一存在两点不好的地方
// 1）需要在这个组件实例中保存数据timer，这是多余的
// 2）我们建立的定时器代码独立于我们的清理代码（执行代码和清理代码不在一起）


// 方案二
new Vue({
  mounted() {
    const timer = setIterval(() => {
      // 某些定时操作
    }, 1000);

    // 通过$once，一次性侦听一个事件
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer);
    })
  }
})